<template>
  <div class="containt">
    <nav-com
      title="我的广告"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="container_box">
      <div class="van_swipe">
        <!--vant van-swipe 滑动组件 -->
        <van-swipe
          :show-indicators="false"
          @change="onChange"
          vertical
          :loop="false"
          style="height: 100vh"
        >
          <van-swipe-item
            v-for="(item, index) in imgList"
            :key="index"
            class="product_swiper"
          >
            <!-- 封面 -->
            <div>
              <img
                class="img"
                :src="item.image"
              />
            </div>
            <div class='icon'>
          <div>
            <van-icon
              name="like"
              :color="likeIconColor"
              size="30"
              @click="tolike"
            />
            <div class="text">点赞</div>
          </div>

          <div>
            <van-icon
              name="comment"
              color="rgba(255,255,255,0.9)"
              size="30"
            />
            <div class="text">评论</div>
          </div>

          <div @click="showShare = true">
            <van-icon
              name="share"
              color="rgba(255,255,255,0.9)"
              size="30"
            />
            <div>分享</div>
          </div>

        </div>

          </van-swipe-item>
        </van-swipe>
        
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
import { getAd } from "@/api/api";
import navCom from "@/component/nav";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      current: 0,
      showView: false,
      imgList: [],
      page: 1,
      likeIconColor: "rgba(255,255,255,0.9)",
      isCollect: false,
    };
  },
  created() {
    // if (weixin.isAndroid()) {
    //   let version = window.JS_TROOPS.getAppVersionCode();
    //   if (!version || version != "102") {
    //     this.$dialog.alert({
    //       title: "版本升级",
    //       message: "升级后可使用支付宝支付。",
    //       showCancelButton: true,
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //     }).then(()=>{
    //       this.$router.push("/upgradeTips")
    //     })
    //   }
    // }
    this.initData();
  },
  methods: {
    tolike() {
      this.isCollect = !this.isCollect;
      this.likeIconColor = this.isCollect ? "red" : "rgba(255,255,255,0.9)";
    },
    initData() {
      let queryData = {
        page: this.page,
        per_page: 10,
      };
      getAd(queryData)
        .then((result) => {
          let img = result.data.data.data;
          this.imgList = [...this.imgList, ...img];
          if (img.length != 0) {
            this.page += 1;
            this.initData();
          }
        })
        .catch((err) => {});
    },
    //滑动改变播放的视频
    onChange(index) {
      this.page++;
      this.current = index;
    },
  },
};
</script>

<style scoped>
.container {
  height: 100vh;
  position: relative;
}
.icon {
  z-index: 10;
  color: #fff;
  position: absolute;
  width: 50px;
  bottom: 15vh;
  right: 5px;
  text-align: center;
}
.icon .text {
  margin-bottom: 50px;
}
.van_swipe {
  width: 100%;
  height: 100vh;
}
.container_box {
  width: 100%;
  height: 100vh;
}
.van-swipe-item {
  /* height: 900px !important; */
}
.product_swiper {
  /* position: relative; */
  /* height: 100vh !important; */
}
.img {
  width: 100%;
  height: 100vh;
}
</style>